<div [@flyIn]="'active'">

  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >

        <div class="m-t-xs m-t-sm">
          <span>系统管理</span>
          <i class="fa fa-angle-right"></i>
          <span>设备管理 </span>
          <i class="fa fa-angle-right"></i>
          <span>设备列表</span>
        </div>

      </div>
    </div>
  </div>

  <div class="wrapper-sm" style="font-size:12px">

    <div class="panel panel-default" style="border-radius:5px">

      <div class="panel-body">
        <div class="panel b-a" [ngStyle]="{display: elc.a}">
          <button class="btn btn-info btn-sm pull-right"  (click)="newModal()" style="margin-top:20px;margin-right: 10px">新增</button>
        </div>
        <div>
          <table  class="table table-striped table-hover m-b-none ">
            <thead>
            <tr>
              <th  style="width:15%">设备ID</th>
              <th  style="width:10%">产品名称</th>
              <th  style="width:10%">设备名称</th>
              <th  style="width:10%">设备品牌</th>
              <th  style="width:10%">设备别名</th>
              <th  style="width:15%">设备定位方式</th>
              <th  style="width:10%">状况</th>
              <th  style="width:20%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of data">
              <td>{{item.mac}}</td>
              <td>{{item.product_name}}</td>
              <td>{{item.name}}</td>
              <td>{{item.brand}}</td>
              <td>{{item.alias_name}}</td>
              <td>{{item.locate_mode}}</td>
              <td *ngIf="item.online=='在线'"><span  class="label bg-success inline m-t-xs">{{item.online}}</span></td>
              <td *ngIf="item.online=='离线'"><span class="label bg-danger inline m-t-xs">{{item.online}}</span></td>
              <td>
                <a (click)="editModal(item)" [ngStyle]="{display: elc.e}">
                  <span tooltip="{{tool.editproductTooltip|translate}}" class="glyphicon glyphicon-pencil" style="color: green;margin-right: 10px"></span>
                </a>

                <a (click)="deleteModal(item)" [ngStyle]="{display: elc.d}">
                  <span tooltip="{{tool.delproductTooltip|translate}}" class="glyphicon glyphicon-remove" style="color: red;margin-right: 10px"></span>
                </a>

                <a [routerLink]="['../devicedetail',item.id.replace('/','|')]" class="glyphicon glyphicon-plus" style="color: purple;">
                  <span tooltip="{{tool.deviceinfoTooltip|translate}}" ></span>
                </a>
              </td>
            </tr>
            </tbody>
          </table>
          <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>

        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">新增设备</p>
            <p *ngIf="buttonType==2">编辑设备</p>
            <p *ngIf="buttonType==3">删除设备</p>
          </h3>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-sm-12" *ngIf="buttonType!=3">
              <div class="bs-example form-horizontal">

               <!--  <div class="form-group" *ngIf="buttonType==1" >
                  <label class="col-lg-3 control-label">创建方式</label>
                  <div class="col-lg-9" >
                    <select class="form-control m-b" [(ngModel)]="model.selectedmodel">
                      <option value="">--请选择创建方式--</option>
                      <option>单个创建</option>
                      <option>批量创建</option>
                    </select>
                  </div>
                </div> -->

      <!--           <div *ngIf="model.selectedmodel=='批量创建'">
                  <div class="form-group">
                    <label class="col-lg-3 control-label">上传文件</label>
                    <div class="col-lg-9">
                      <!--<div type="button" ngf-select="upload($files)"   ngf-multiple="true" class="form-control btn"   [(ngModel)]="model.file">上传设备创建信息文件</div>-->
        <!--             </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">文件</label>
                    <div class="col-lg-9">
                      <ul>
                        <li *ngFor="let f of files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">上传的log显示</label>
                    <div class="col-lg-9">
                      <pre style="margin-top: 10px">{{log}}</pre>
                    </div>
                  </div>
                </div> --> 

               <!--  <div *ngIf="model.selectedmodel=='单个创建'"> -->
          
                  <div class="form-group">
                    <label class="col-lg-3 control-label">客户简称</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control"  [(ngModel)]="model.name" placeholder="请输入客户简称">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">设备别名</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control"  [(ngModel)]="model.alias_name" placeholder="请输入设备别名">
                    </div>
                  </div>
                <!--   <div *ngIf="buttonType == 1"> -->
                    <div class="form-group">
                      <label class="col-lg-3 control-label">型号</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control"  [(ngModel)]="model.model" placeholder="请输入设备型号">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-3 control-label">MAC地址</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control"  [(ngModel)]="model.mac" placeholder="请输入设备mac地址" required="" *ngIf="buttonType == 1">
                         <input type="text" class="form-control"  [(ngModel)]="model.mac" placeholder="请输入设备mac地址"  *ngIf="buttonType == 2" readonly="">
                      </div>
                      <div class="col-lg-2" style="color:red;margin-top: 8px;">
                        <p [hidden]="model.mac">必填</p>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-3 control-label">终端用户</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control"  [(ngModel)]="model.zdyh" placeholder="请输入终端用户">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-3 control-label">设备序列号</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control"  [(ngModel)]="model.sn" placeholder="请输入设备序列号">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-3 control-label">设备自定义名称</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control"  [(ngModel)]="model.xcxlh" placeholder="请输入设备序列号">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-3 control-label">设备手册</label>
                      <div class="col-lg-7">
                        <input type="text" class="form-control" id="file_upload" name="file_upload" type="file" multiple="true" >
                        <span id="file_uploaded"></span>
                      </div>
                    </div>
              <!--     </div> -->

                  <div class="form-group">
                    <label class="col-lg-3 control-label">选择组名</label>
                    <div class="col-lg-7">
                      <select name="account" class="form-control m-b" [(ngModel)]="model.device_group">
                        <option value="">--请选择组名--</option>
                        <option *ngFor="let option of list" value="{{option.id}}">{{option.name}}</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="col-lg-3 control-label">定位方式</label>
                    <div class="col-lg-7">
                      <select name="account" class="form-control m-b" [(ngModel)]="model.locate_mode">
                        <option value="">--请选择定位方式--</option>
                        <option value="0">输入地址</option>
                        <option value="1">IP</option>
                        <option value="2">GPIS</option>
                      </select>
                    </div>
                  </div>

                  <div *ngIf="model.locate_mode=='0'">

                    <div class="form-group">
                      <label class="col-lg-3 control-label">地址信息</label>
                    </div>

                    <div>

                      <div *ngIf="division">
                        <div class="form-group">
                          <label class="col-lg-3 control-label">省份</label>
                          <div class="col-lg-7">
                            <select class="form-control" [(ngModel)]="model.province" name="province" (change)="model.city='';model.area=''">
                              <option value="">-- 请选择 --</option>
                              <option *ngFor='let item  of division |  values' [value]="item">{{item}}</option>
                            </select>
                          </div>
                        </div>

                        <div class="form-group" *ngIf="model.province" (change)="model.area=''">
                          <label class="col-lg-3 control-label">城市</label>
                          <div class="col-lg-7">
                            <select class="form-control"  [(ngModel)]="model.city" name="city" >
                              <option value="">-- 请选择 --</option>
                              <option *ngFor='let item  of division[model.province] |  values' [value]="item">{{item}}</option>
                            </select>
                          </div>
                        </div>

                        <div class="form-group" *ngIf="model.city">
                          <label class="col-lg-3 control-label">区</label>
                          <div class="col-lg-7">
                            <select class="form-control"  [(ngModel)]="model.area" name="area" >
                              <option value="">-- 请选择 --</option>
                              <option *ngFor='let item  of division[model.province][model.city]' [value]="item">{{item}}</option>
                            </select>
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="col-lg-3 control-label">具体地址</label>
                        <div class="col-lg-7">
                          <textarea class="form-control"  [(ngModel)]="model.street"  rows="3"></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <alert *ngIf="buttonType==3" type="danger">
              <h4>确定要删除<strong>{{ model.name }}</strong>吗？</h4>
            </alert>

          </div>
   <!--      </div> -->

        <div class="modal-footer">
          <button class="btn btn-info" *ngIf="buttonType==1" (click)="confirmNew()" [disabled]="disabled||!model.mac">保存</button>
          <button class="btn btn-info" *ngIf="buttonType==2" (click)="confirmEdit()" [disabled]="disabled">保存</button>
          <button class="btn btn-danger" *ngIf="buttonType==3" (click)="confirmDelete()" [disabled]="disabled">删除</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>
